[アップデート] Amazon S3 コンソールから Amplify ホスティングへのデプロイが簡単に行えるようになりました

いわさ

2024.11.03

いわさです。

先日、AWS Amplify と Amazon S3 の統合で静的ウェブサイトコンテンツが Amplify Hosting 環境に簡単にデプロイ出来るようになるというアップデートがありました。

今回のアップデートで S3 コンソール上では Amplify Hosting が推奨されるようになっています。
そして、S3 コンソール上から Amplify Hosting 作成ボタンが設置され、S3 の情報を引き継いですぐに Amplify アプリケーションを作成出来るようになっています。

これまで私は静的コンテンツのみのウェブサイトであれば、CloudFront + S3 でホスティングすることが圧倒的に多かったのですが、Amplify Hosting の場合だと従来の CloudFront + S3 で悩みがちだったポイントや、意外に大掛かりになりがちな環境構築がサクっと出来るようになり、今後の主流になる気がします。

S3 コンソールから Amplify Hosting を開始するまでの流れ

まずは作成の流れですが、今回のアップデートで次のように S3 コンソールの「静的ウェブサイトホスティング」設定にてバナーが表示されるようになっています。
S3 の静的ウェブサイトホスティング機能ではなく、Amplify ホスティングを使うように推奨されるようになりました。そして Amplify アプリを作成するためのボタンが設置されています。

こちらを押してみると Amplify コンソールへ移動します。
そして従来の新規アプリ作成画面が表示され、Amazon S3 バケットによる手動デプロイが選択されています。
S3 バケットも自動で入力されていますね。

だいぶ前に触ったので最近どうだったのか把握してないですが、私の記憶だと以前から S3 バケットは選択出来ましたが、コンテンツを Zip でアップロードして選択する形だったような記憶があります。どこからのタイミング（今回？）でバケットロケーションのみで指定出来れば展開されたコンテンツを自動でアップロード出来るようになったのかな。
非常に便利です。

「保存してデプロイ」ボタンを押しましょう。
これでデプロイが実行され、完了しました。簡単すぎる。

デフォルトドメインが発行されているのでそのままリクエストを送信してみます。

% curl https://staging.dnnqgjx27urw9.amplifyapp.com/
index1
% curl https://staging.dnnqgjx27urw9.amplifyapp.com/index2.html
index2

すぐに静的ウェブサイトがホスティング出来ました。
ヘッダー情報などから Amplify Hosting でも CloudFront + S3 が使われていることが確認出来ます。ディストリビューションもバケットも Amplify が管理するものでこちらから操作は出来ないのですが。

% curl https://staging.dnnqgjx27urw9.amplifyapp.com/ -I
HTTP/2 200 
content-type: text/html
content-length: 6
date: Sat, 02 Nov 2024 21:01:08 GMT
server: AmazonS3
accept-ranges: bytes
etag: "8df17c77af23061ef4322d47d6c431fa"
last-modified: Sat, 02 Nov 2024 21:00:23 GMT
cache-control: public, max-age=0, s-maxage=31536000
x-cache: Hit from cloudfront
via: 1.1 8f04fc9fa6b5d8f6fb1d186398be5c6a.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-P2
alt-svc: h3=":443"; ma=86400
x-amz-cf-id: sUH78lyvsKtHLhsYuaWYSzcE6cjtudyqWjMAf6rtNWIdcs_L53F6wQ==
age: 53

S3 静的ウェブサイトホスティング機能は無効で、バケットポリシーが構成されている

で、元々コンテンツを用意していた S3 バケットを確認してみると静的ウェブサイトホスティング機能は無効状態であることが確認出来ました。なるほど。

となるとバケットポリシーで色々やっていそうです。
確認してみると、Amplify からの S3 API 呼び出しを許可する設定が色々と追加されていました。このあたりも自動でやってくれます。

自分で CloudFront を使う場合だと OAC を用意してバケットポリシーを設定してなど、バケットポリシーを自己管理する必要があったのですが、セキュアな状態で全部自動でやってくれますね。良さそう。

オリジンコンテンツは Amplify にアップロードされたもの

私は当初、ユーザーが用意した S3 バケットをオリジンとして Amplify がエッジ的な感じになるのかなと勘違いしたのですが、そうではなくて S3 バケットから Amplify にデプロイ操作ごとにアップロードされ、そのアップロードされたコンテンツがオリジンになります。

試しに次のように用意した S3 バケットに新しいコンテンツをアップロードしてみましょう。

% cat index3.html
index3%  

% aws s3 cp ./index3.html s3://hoge1103amplify/
upload: ./index3.html to s3://hoge1103amplify/index3.html

% curl https://staging.dnnqgjx27urw9.amplifyapp.com/index3.html -i
HTTP/2 301 
content-length: 0
date: Sat, 02 Nov 2024 21:08:57 GMT
location: /index3/
server: AmazonS3
x-cache: Miss from cloudfront
via: 1.1 0351cfe7ed552069eb05c4ac51dbf9cc.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-P2
alt-svc: h3=":443"; ma=86400
x-amz-cf-id: lGlbZW2aZPwEWQQwKTRS-mT3VHsYWQtyQNKDta6a6fNVwRmSv2k7Qw==

該当するコンテンツが見つからずリダイレクトされましたね。（このリダイレクト動作は後述するリダイレクトルールに則ったものです）

ではコンテンツの更新をしてみましょう。
S3 バケットへのアップロード後に、Amplify 上で「アップデートをデプロイ」してやると良いです。

デプロイ方法で S3 バケットが自動選択されていないので選択しましょう。
S3 ロケーションは保存されているはず。
ここの選択は自動化してほしいですね。

「保存してデプロイ」ボタンを押せばデプロイが開始されます。

デプロイ後はコンテンツが更新されていることが確認出来ました。

% curl https://staging.dnnqgjx27urw9.amplifyapp.com/index3.html -i
HTTP/2 200 
content-type: text/html
content-length: 6
date: Sat, 02 Nov 2024 21:10:48 GMT
server: AmazonS3
accept-ranges: bytes
etag: "72bca5baf62d5a9c12dc3985e045bf95"
last-modified: Sat, 02 Nov 2024 21:10:36 GMT
cache-control: public, max-age=0, s-maxage=31536000
x-cache: Miss from cloudfront
via: 1.1 8db6e780114a9278703d6f539bb3bf14.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT20-P2
alt-svc: h3=":443"; ma=86400
x-amz-cf-id: nC7xV_1jxqzC3tpkslPPBjBq--fCG-lfH1W-SzWhWjO_7ucdhsOpSA==

index3

なお、S3 へのアップロードから Amplify へのデプロイを自動化したい場合は S3 トリガーを使って Amplify のデプロイ開始を呼び出す方法が以前から紹介されています。
ただこちらは昔の Zip 形式の方法ですので、今回の構成だとコンテンツ更新ごとにデプロイが発生してしまいそうです。
そのため、キューイングして少しタイムラグを設け、複数ファイルのデプロイを一括で行うなど工夫が必要そうです。

まずは S3 バケットと Amplify ホスティングのコンテンツの同期は明示的に行う必要があるという点を意識しておきましょう。
私は逆にこの点はデプロイタイミングがコントロールしやすくなるのでやりやすいなとも思ってます。

従来の静的ウェブサイトホスティング機能は引き続き使える

一方で静的ウェブサイトホスティング機能も引き続き使うことが出来ます。
S3 コンソールで「Amplify アプリを作成」ボタンではなく「編集」ボタンを押すことで設定出来ます。

後述する内容から、単純なウェブサイトホスティングを使いたい場合であれば今後は Amplify Hosting のほうが良いのではと個人的に思っていますが、影響なく引き続き使えるという点を覚えておきましょう。

ちなみにどこかのタイミングでこの機能が使えなくなるのかどうかについては言及されていませんでした。

Amplify Hosting と独自 CloudFront の比較

ここからは直接今回のアップデートと関係ないのですが、今回改めて Amplify Hosting で静的ウェブサイトコンテンツをホスティングする点で便利だなと感じたことが多かったので紹介します。

Amplfy Hosting だとリライト・リダイレクトルールが書ける

CloudFront + S3 の場合で私がよく悩んでいたのが、OAC を使って CloudFront でホスティングする場合のリダイレクトルールなどの管理方法でした。

静的ウェブサイトホスティング機能を使うとリダイレクトルールなどの記述が出来るのですが、パブリックアクセスを避ける（カスタムヘッダーで妥協するなど）とか、エッジからオリジンまでの HTTP 通信が許容出来ずに導入出来ない場合があると思います。

そうした時、CloudFront だと細かいルールの管理が出来ないので CloudFront Functions や Lambda@Edge が必要になる場合があります。
ライトに静的ウェブサイトホスティングを管理したい時に関数コードの管理が発生するのは結構敷居が高くて、いつも導入を悩んでいました。

Amplify Hosting であればリライト・リダイレクトのルール管理をコンソール上で直感的に行うことが出来ます。

複数環境を管理出来る

静的ウェブサイトをホスティングする場合に更新コンテンツを公開する前に確認する環境が欲しいとよく聞きます。
CloudFront でも複数環境の用意は出来るのですが、Amplify Hosting だとアプリ内で複数環境を簡単に用意することが出来て、こちらも非常に便利だと思います。

前述のとおりデプロイタイミングをコントロール出来るので、コンテンツアップロード用の S3 バケットが同じ環境を複数用意しても、環境へのアップロードをデプロイしたタイミングでコンテンツ更新が可能です。

ベーシック認証を簡単に設定できる

静的ウェブサイトをホスティングする際に実はよく要件として出てくるのがベーシック認証です。
これを CloudFront で実現する場合には CloudFront Functions を使う必要がありました。

Amplify Hosting の場合ではアクセスコントロール機能から簡単にユーザー・パスワードの設定が可能です。

また、運用環境はパブリック、ステージング環境はベーシック認証なんて構成も非常によく聞きますが、Amplify Hosting では環境ごとにアクセスコントロール設定が可能です。

（まだ）WAF がない

Amplify Hosting には WAF を管理する機能がありません。
そのため、WAF が必要な場合は従来は追加で CloudFront を独自で用意してそちらに AWS WAF を追加するようなことがありました。

折角インフラを管理したくなくて Amplify を使ったのに CloudFront + WAF を追加で用意するなんてのはあまりやりたくないです。

ただ、このあたりは現在準備が進んでいるようです。どうやら 11 月末に向けて用意されているような。re:Invent で何かありそうですね。楽しみです。

将来的にWAFはAmplifyに直接統合できると良いと思います。Issueでも議論がされていますね。

キャッシュコントロールなどのカスタマイズ性が柔軟ではない

CloudFront の場合は細かくキャッシュポリシーやオリジンポリシーの設定が出来ます。
あるいはパスベースでオリジンのコントロールなんてのも出来ます。

Amplify ではコンテンツキャッシュが有効化されていますが、決まったルールで事前に用意されたキャッシュポリシーが設定されます。
詳細は以下に記載されていますが、これを変更・カスタマイズすることは出来ません。

最近行えるようになったものとしてキャッシュヒット率を上げるためにキャッシュキーに Cookie を含めるかどうかを選択出来るようになりました。

ですので、細かいキャッシュ戦略が必要な場合などディストリビューションに細かい設定が必要な場合は CloudFront を独自で持ったほうが良いです。
その場合はオリジンが S3 でも良いのですが、Amplify をオリジンにする場合もよくあります。

料金は Amplify のほうが高い

CloudFront と Amplify のデータ転送料金を比較してみました。

https://aws.amazon.com/amplify/pricing/

1 GB のインターネットアウトバウンドで比較すると Amplify が 0.15 USD、CloudFront が 0.114 USD です。さらに CloudFront は Tier の概念があったり、CloudFront Security Savings Bundle などの概念もあります。
コンテンツ配信の料金面だけ見ると、Amplify よりも CloudFront のほうが安価です。

さいごに

本日は Amazon S3 コンソールから Amplify ホスティングへのデプロイが簡単に行えるようになったので試してみました。

しばらく S3 バケットから Amplify へアップロードするパターンを私やっていなかったのですが、前って Zip ファイルでのアップロードだったような記憶があるのですが、今回変わったのか、どこかで変わったのか、それも合って、今後は静的ウェブサイトコンテンツのホスティングは、全部 Amplify でいいかもなと思い始めています。

エッジの細かいカスタマイズが必要な場合は従来の構成を、Amplify に寄せれそうなら便利な機能が多すぎるので寄せたほうが良さそうですね。

料金面で CloudFront 独自のほうが有利ですが、動画など料金が跳ねやすいものだけ CloudFront にのせてやるのもありかなと思いました。